import React, { useState, useCallback, useEffect } from 'react'
import { useLocation, useHistory } from 'react-router-dom'
import { getSofContractFindCp } from '../Api'
import ChangeModule from './Components/ChangeModule'
import { ContractMoneyPlanAll } from './style'
import { Button, message, PageHeader, Space, Table } from 'antd'

const ContractMoneyPlan = () => {
    const location = useLocation()
    const history = useHistory()
    const [listData, setListData] = useState([])
    const [changeModuleShow, setChangeModuleShow] = useState(false)
    const [clickId, setClickId] = useState(undefined)
    const listFun = useCallback(
        () => {
            ; (async () => {
                const { code, msg, data } = await getSofContractFindCp({ contractNo: location.state.conNo })
                if (code === '20000') {
                    setListData(data)
                } else {
                    message.error(msg)
                }
            })()
        },
        [location.state],
    )
    useEffect(() => {
        listFun()
    }, [listFun])
    //编辑
    const handleChangePlan = id => {
        setChangeModuleShow(true)
        setClickId(id)
    }

    const columns = [
        {
            title: '#',
            render: (text, recode, index) => <span>{index + 1}</span>
        },
        {
            title: '收款科目',
            dataIndex: 'item'
        },
        {
            title: '出账时间',
            dataIndex: 'enterDate'
        },
        {
            title: '应收金额',
            dataIndex: 'ribAccounts'
        },
        {
            title: '操作',
            render: (text, recode) => <Space>
                <Button type = 'primary' onClick = {() => handleChangePlan(recode.id)}>
                    编辑
                </Button>
            </Space>
        },
        
    ];
    return <ContractMoneyPlanAll>
        <PageHeader
            className="site-page-header"
            onBack={() => history.go('-1')}
            title="收款计划"
        />
        <Table columns={columns} dataSource={listData} rowKey='id' />
        <ChangeModule  
        changeModuleShow = {changeModuleShow} 
        setChangeModuleShow = {setChangeModuleShow} 
        clickId = {clickId} 
        listFun = {listFun}
        />
    </ContractMoneyPlanAll>
}

export default ContractMoneyPlan